// 自定义标签<wcs-formula>的解析
import katexStyleContent from 'katex/dist/katex.css?raw'
import { katexRender } from '@/utils/base.js'

class WangEditorFormulaCard extends HTMLElement {
  span
  // 监听的 attr
  static get observedAttributes() {
    return ['data-value']
  }

  constructor() {
    super()
    const shadow = this.attachShadow({ mode: 'open' })
    const style = document.createElement('style')
    style.innerHTML = katexStyleContent
    shadow.appendChild(style)
    this.span = document.createElement('span')
    this.span.style.display = 'inline-block'
    shadow.appendChild(this.span)
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'data-value' && oldValue !== newValue) {
      katexRender(newValue || '', this.span)
    }
  }
}

if (!window.customElements.get('wcs-formula')) {
  window.customElements.define('wcs-formula', WangEditorFormulaCard)
}
